<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #small {
            width: 430px;
            margin: 10px;
            display: flex;
            justify-content: space-around;
        }

        #small>img {
            border: 1px solid;
        }

        #enlarge {
            display: flex;
        }

        #acf {
            width: 430px;
            height: 430px;
            overflow: hidden;
            /* border: 1px solid; */
            margin-left: 10px;
            position: relative;

        }

        #big_big {
            display: none;
            /* border: 1px solid; */
            margin-left: 10px;
            /* background-repeat: no-repeat; */
            position: absolute;

        }

        #bilibili {
            width: 430px;
            height: 430px;
            border: 1px solid;
            position: relative;
        }

        #cube {
            display: none;
            width: 231px;
            height: 231px;
            background-color: rgba(73, 212, 247, 0.3);
            position: absolute;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="enlarge">
        <div id="bilibili">
            <img src="./点击图片/大图（1）.jpg" alt="" id="big">
            <div id="cube"></div>
        </div>
        <div id="acf">
            <img src="./点击图片/巨大图（1）.jpg" alt="" id='big_big'>
        </div>
    </div>
    <div id="small">
        <img src="./点击图片/小图（1）.jpg" alt="">
        <img src="./点击图片/小图（2）.jpg" alt="">
        <img src="./点击图片/小图（3）.jpg" alt="">
    </div>
    <script>
        let arr = ["./点击图片/大图（1）.jpg", "./点击图片/大图（2）.jpg", "./点击图片/大图（3）.jpg"];
        let big_arr = ["./点击图片/巨大图（1）.jpg", "./点击图片/巨大图（2）.jpg", "./点击图片/巨大图（3）.jpg"];
        let img = document.querySelectorAll('#small>img'); //所有的小图
        let big = document.getElementById('big'); //大图
        let big_big = document.getElementById('big_big'); //大图
        let enlarge = document.getElementById('enlarge');

        for (let index in img) {
            img[index].onmousedown = function () {
                big.src = `${arr[index]}`;
                big_big.src = `${big_arr[index]}`;

            }
        }

        bilibili.onmousemove = function (event) {
            let x = event.clientX - cube.clientWidth / 2; 
            let y = event.clientY - cube.clientHeight / 2;
            if (x < 0) {
                x = 0
            }
            if (y < 0) {
                y = 0
            }
            if (x > bilibili.clientWidth - cube.clientWidth) {
                x = bilibili.clientWidth - cube.clientWidth
            }
            if (y > bilibili.clientHeight - cube.clientHeight) {
                y = bilibili.clientHeight - cube.clientHeight
            }
            cube.style.cssText = `
            display: block;
            left:${x}px;
            top:${y}px;
                         `
            big_big.style.cssText = `
            display: block;
            left:${-1.9*x}px;
            top:${-1.8*y}px;
            `

        }
        bilibili.onmouseleave = function (event) {
            cube.style.cssText = `
            display: none;`
            big_big.style.cssText = `
            display: none;`
        }
    </script>
</body>

</html>